<template>
  <Collapse v-model="activeNames" class="bet-collapse">
    <CollapseItem v-for="(item, index) in list" :key="index" :title="item.playTypeName" :name="index">
      <BetNormal :list="[item]" :hideTitle="true" />

      <template #right-icon>
        <div class="expand-icon" :class="{ isExpand: activeNames.includes(index) }" />
      </template>
    </CollapseItem>
  </Collapse>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Collapse, CollapseItem } from 'vant'
import BetNormal from './betNormal.vue'

type Props = {
  list: any[]
}

defineProps<Props>()

const activeNames = ref([0])
</script>

<style scoped lang="less">
.van-hairline--top-bottom:after, .van-hairline-unset--top-bottom:after {
  display: none;
}
.bet-collapse {
  .van-collapse-item--border:after {
    display: none;
  }
  :deep(.van-collapse-item) {
    .van-collapse-item__title {
      align-items: center;
      margin-bottom: 7px;
      padding: 0 11px 0 8px;
      box-sizing: border-box;
      text-align: left;
      color: #BDC4FF;
      background: linear-gradient(0deg, #2A2C5D, #2A2C5D),
                  linear-gradient(0deg, #3B3D6E, #3B3D6E);
      border: 1px solid #3B3D6E;
      border-radius: 4px;
      font-size: 12px;
    }

    .van-collapse-item__content {
      margin-bottom: 7px;
      padding: 0;
      background-color: transparent;
    }
    .van-collapse-item--border:after {
      display: none;
    }
    .van-collapse-item__title--expanded:after {
      display: none;
    }
    .expand-icon {
      width: 9px;
      height: 9px;
      background: url('@/assets/img/bet/collapse_triangle.svg') center center no-repeat;
      background-size: contain;
      transition: transform 0.2s;

      &.isExpand {
        transform: rotate(180deg);
      }
    }
  }
}
</style>
